<template>
	<view class="container">
		<uni-segmented-control :current="currentIndex" :values="items" style-type="text" active-color="#007aff"
			@clickItem="onClickItem" />

		<view v-if="currentIndex === 0">
			<view style="padding-top: 10px;"></view>
			<uni-forms ref="baseForm" :modelValue="meetingForm" border labelWidth="100px" label-position="left">
				<view style="padding-top: 10px;"></view>
				<uni-forms-item label="主题">
					<uni-easyinput type="text" autoHeight v-model="meetingForm.topic" />
				</uni-forms-item>

				<uni-forms-item label="日期">
					<uni-datetime-picker @click="chuanci()" @change="chuanci2" @maskClick="chuanci2()" type="date"
						return-type="string" v-model="meetingForm.meetingDate" />
				</uni-forms-item>
				<uni-forms-item label="开始时间">
					<view class="picker-bg">
						<picker mode="time" :value="meetingForm.startTime" start="00:00" end="23:59"
							@change="startTimeChange">
							{{meetingForm.startTime}}
						</picker>
					</view>

				</uni-forms-item>
				<uni-forms-item label="结束时间">
					<picker mode="time" :value="meetingForm.endTime" start="00:00" end="23:59" @change="endTimeChange">
						<view class="picker-bg">{{meetingForm.endTime}}</view>

					</picker>
				</uni-forms-item>
				<uni-forms-item label="地点">
					<uni-easyinput type="text" v-model="meetingForm.place" />
				</uni-forms-item>
				<uni-forms-item label="主持">
					<uni-easyinput type="text" v-model="meetingForm.host" />
				</uni-forms-item>
				<uni-forms-item label="形式">
					<uni-easyinput type="text" v-model="meetingForm.xingshi" />
				</uni-forms-item>

				<uni-forms-item label="会议内容">
					<uni-easyinput type="textarea" @change="chuanci2" @input="chuanci2" autoHeight
						v-model="meetingForm.content" />
				</uni-forms-item>

				<!-- 附件模块 -->
				<uni-forms-item label="上传会议方案"></uni-forms-item>
				<view v-for="(item,index) in files.values()" :key="index">
					<view v-if="item.type=='success' && item.size <=1048576">[{{(item.size/1024).toFixed(2)}}KB]
						{{item.name.substring(0,30)}}

					</view>
					<view v-if="item.type=='success' && item.size >1048576">[{{(item.size/1048576).toFixed(2)}}MB]
						{{item.name.substring(0,30)}}

					</view>
					<view v-if="item.type!='success'"><i style="color: royalblue;">上传{{item.progress}}%</i>
						{{item.name.substring(0,30)}}</view>
				</view>
				<lsj-upload ref="lsjUpload" childId="upload1" height="40px" :size="uploadconfig.size"
					:instantly="uploadconfig.instantly" :formats='uploadconfig.formats' :option="option"
					@change="onChange" @progress="onprogress" @uploadEnd="onuploadEnd">
					<button class="btn-fujian" @click="fuckyou">添加附件</button>

				</lsj-upload>
				<view class="tips">说明：从此上传图片将无法预览，单个文件请控制在100MB以内</view>




				<!-- 选择多人模板 -->
				<uni-forms-item label="参会人员" required>
					<uni-row v-if="meetingForm.attenders.length !=0">
						<uni-col :span="8" v-for="(item, idx) in meetingForm.attenders" :key="idx">
							<view class="user-bg">
								<text>{{item.name}}</text>
							</view>
						</uni-col>
					</uni-row>
					<button @click="clickSelectAttender" class="btn-add">添加参会人员</button>
				</uni-forms-item>

				<view style="padding-top:50px;"></view>
				<button type="primary" @click="clickApply">提交</button>
			</uni-forms>
		</view>
		<view v-if="currentIndex === 1">
			<view v-for="(item, idx) in applyRecord" style="padding-bottom: 10px;" :key="idx">
				<view class="card" @click="seeDetail(idx)">
					<view class="card-title">
						<uni-row>
							<uni-col :span="20">
								<view class="card-title-left">{{item.topic}}</view>
							</uni-col>
							<uni-col :span="4">
								<!-- <view class="card-title-right">
									<uni-tag text="审核" size="mini" type="warning" v-if="item.sta===1"></uni-tag>
									<uni-tag text="通过" size="mini" type="primary" v-if="item.sta===2"></uni-tag>
									<uni-tag text="拒绝" size="mini" type="error" v-if="item.sta===3"></uni-tag>
									<uni-tag text="撤销" size="mini" type="default" v-if="item.sta===4"></uni-tag>
								</view> -->
							</uni-col>
						</uni-row>
					</view>
					<view class="card-body">
						<view>会议地点：{{item.place}}</view>
						<view>会议日期：{{getFormatedTimeStr(item.meetingDate,'MM月DD日')}} {{item.startTime}}~{{item.endTime}}</view>
						<view>会议内容：{{item.content}}</view>
					</view>
					<view class="card-footer">
						<uni-row>
							<uni-col :span="24">
								<view class="card-footer-right">
									{{getFormatedTimeStr(item.createTime)}}
								</view>
							</uni-col>
						</uni-row>
					</view>
				</view>
			</view>
			
			

			<uni-load-more :status="moreStatus"></uni-load-more>
		</view>

	</view>
</template>

<script>
	import moment from 'moment'
	import {
		websock
	} from '../../net/websock'
	import {
		uploadconfig
	} from '../../const'

	export default {
		data() {
			return {
				// 上传参数部分没有事情不要乱动
				uploadconfig,
				option: {
					url: uploadconfig.url,
					name: 'file',
					header: {},
					formData: {}
				},
				formats: uploadconfig.formats,
				instantly: uploadconfig.instantly,
				size: uploadconfig.size,
				files: new Map(),
				// 上传参数部分没有事情不要乱动

				moreStatus: 'more',
				applyRecord: [],

				currentIndex: 0,
				items: ['发起会议', '会议历史'],
				meetingForm: {
					topic: '', // 主题
					content: '', // 内容
					meetingDate: '2022-01-01', // 会议日期
					startTime: '00:00', // 开始时间
					endTime: '23:59', // 结束时间
					place: '', // 地点
					host: '', // 主持
					xingshi: '', // 会议形式
					attenders: [], // 参会人员
					attaches: [], // 附件
				}
			}
		},
		async onReady() {
			this.meetingForm.meetingDate = moment().format('YYYY-MM-DD')
			console.log('on ready', this.meetingForm)

			this.getNewestRecord()
		},
		// 下拉刷新，获取最新的数据
		onPullDownRefresh() {
			console.log('onPullDownRefresh')
			if (this.currentIndex == 0) {
				uni.stopPullDownRefresh()
			} else {
				this.getNewestRecord()
			}
		},
		// 上拉刷新，获取历史数据
		onReachBottom() {
			console.log('onReachBottom')
			if (this.currentIndex == 1) {
				this.getOlderRecord()
			}
		},
		methods: {
			// 附件上传恶心的代码块-------------------------------------------------------------
			// 某文件上传结束回调(成功失败都回调)
			onuploadEnd(item) {
				console.log('fuck you', 3)
				if (item.type == 'fail') {
					return uni.showToast({
						title: '上传失败'
					})
				}
				try {
					let res = JSON.parse(item.responseText)
					if (res.code !== 0) {
						return uni.showToast({
							title: res.message || 'error'
						})
					}
					this.meetingForm.attaches.push({
						name: item.name,
						path: res.data
					})
				} catch (err) {
					uni.showToast({
						title: err.message
					})
				}
				this.$forceUpdate();
			},
			// 上传进度回调
			onprogress(item) {
				this.files.set(item.name, item); // 更新当前状态变化的文件
				this.$forceUpdate(); // 强制更新视图
			},
			// 文件选择回调
			onChange(files) {
				this.files = files; // 更新选择的文件 
				this.$forceUpdate(); // 强制更新视图
			},
			// 穿刺一击让他们的遮罩层消失
			chuanci() {
				this.$refs.lsjUpload && this.$refs.lsjUpload.hide();
			},
			// 穿刺一击让他们的遮罩层消失
			chuanci2() {
				this.$refs.lsjUpload && this.$refs.lsjUpload.show();
				this.$forceUpdate()
			},
			// 强制重置附件按钮,万一出意外点2次按钮至少可以进去
			fuckyou() {
				this.$refs.lsjUpload && this.$refs.lsjUpload.hide()
				this.$refs.lsjUpload && this.$refs.lsjUpload.show()
				this.$forceUpdate()
			},
			// 附件上传恶心的代码块-------------------------------------------------------------
			// 获取最新的通知
			async getNewestRecord() {
				try {
					if (this.applyRecord.length == 0) {
						let res = await websock.huiyiTongzhiRecord({
							pageCount: 10
						})
						console.log('getRecordList list empty', res)
						uni.stopPullDownRefresh()
						this.applyRecord = [...res, ...this.applyRecord]
					} else {
						let res = await websock.huiyiTongzhiRecord({
							greaterThan: this.applyRecord[0].id,
							pageCount: 10
						})
						console.log('getRecordList list not empty', res)
						uni.stopPullDownRefresh()
						this.applyRecord = [...res, ...this.applyRecord]
					}
				} catch (e) {
					uni.showToast({
						title: e.message
					})
				}
			},
			// 获取老的数据
			async getOlderRecord() {
				this.moreStatus = 'loading'
				try {
					if (this.applyRecord.length == 0) {
						console.log('before get list empty')
						let res = await websock.huiyiTongzhiRecord({
							pageCount: 10
						})
						console.log('getOlderRecord list empty', res)
						this.applyRecord = [...this.applyRecord, ...res]
						if (res.length < 10) {
							this.moreStatus = 'noMore'
						} else {
							this.moreStatus = 'more'
						}
					} else {
						console.log('before get list not empty')
						let res = await websock.huiyiTongzhiRecord({
							lessThan: this.applyRecord[this.applyRecord.length - 1].id,
							pageCount: 10
						})
						console.log('getOlderRecord list not empty', res)
						this.applyRecord = [...this.applyRecord, ...res]
						if (res.length < 10) {
							this.moreStatus = 'noMore'
						} else {
							this.moreStatus = 'more'
						}
					}
				} catch (e) {
					uni.showToast({
						title: e.message
					})
				}
			},
			getFormatedTimeStr(stamp, str='MM-DD HH:mm:ss') {
				return moment(stamp).format(str)
			},
			rmAttenders(idx) {
				this.meetingForm.attenders.splice(idx, 1)
			},

			onClickItem(e) {
				if (this.currentIndex !== e.currentIndex) {
					this.currentIndex = e.currentIndex
				}
			},
			startTimeChange(e) {
				console.log(e.detail.value)
				this.meetingForm.startTime = e.detail.value
			},
			endTimeChange(e) {
				console.log(e.detail.value)
				this.meetingForm.endTime = e.detail.value
			},

			clickSelectAttender() {
				uni.navigateTo({
					url: '/pages/common/contactSelect?selectedUsers=' + JSON.stringify(this.meetingForm
						.attenders || []),
					events: {
						contactList: data => {
							console.log('select auditor', data)
							this.meetingForm.attenders = data.contactList
						}
					}
				})
			},
			async clickApply() {
				console.log('click apply', this.meetingForm)

				if (!this.meetingForm.topic) return uni.showToast({
					title: '请输入会议主题'
				})
				if (!this.meetingForm.content) return uni.showToast({
					title: '请输入会议内容'
				})
				if (!this.meetingForm.meetingDate) return uni.showToast({
					title: '请选择会议日期'
				})
				if (!this.meetingForm.place) return uni.showToast({
					title: '请输入会议地点'
				})
				if (!this.meetingForm.host) return uni.showToast({
					title: '请输入会议主持'
				})
				if (!this.meetingForm.xingshi) return uni.showToast({
					title: '请输入会议形式'
				})
				if (this.meetingForm.attenders.length == 0) return uni.showToast({
					title: '请选择参会人员'
				})

				// let attenders = []
				// for (let i = 0; i != this.meetingForm.attenders.length; i++) {
				// 	attenders.push(this.meetingForm.attenders[i].uid)
				// }

				try {
					await websock.newHuiyiTongzhi({
						topic: this.meetingForm.topic,
						content: this.meetingForm.content,
						meetingDate: this.meetingForm.meetingDate,
						startTime: this.meetingForm.startTime,
						endTime: this.meetingForm.endTime,
						place: this.meetingForm.place,
						host: this.meetingForm.host,
						xingshi: this.meetingForm.xingshi,
						attenders: this.meetingForm.attenders,
						attaches: this.meetingForm.attaches
					})

					uni.showToast({
						title: '会议发起成功'
					})

					this.meetingForm = {
						topic: '', // 主题
						content: '', // 内容
						meetingDate: '2022-01-01', // 会议日期
						startTime: '00:00', // 开始时间
						endTime: '23:59', // 结束时间
						place: '', // 地点
						host: '', // 主持
						xingshi: '',
						attenders: [], // 参会人员
						attaches: [], // 附件
					}

					this.currentIndex = 1
					this.getNewestRecord()
				} catch (err) {
					uni.showToast({
						title: err.message
					})
				}
			},
			seeDetail(idx) {
				uni.navigateTo({
					url: `/pages/task/huiyiTongzhiDetail?id=${this.applyRecord[idx].id}`
				})
			}
		}
	}
</script>

<style>
	@import '../common/common.css';
</style>
